<template>
    <div class="menus-box">
        <div class="mod-meun">
            <el-form :inline="true" :model="dataForm">
                <el-form-item>
                    <el-button size="mini" type="primary" @click="addOrUpdateHandle(null, 3)">新增一级分类</el-button>
                </el-form-item>
            </el-form>

            <el-table
                row-key="classifyId"
                border
                :data="dataList"
                :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
                element-loading-text="拼命加载中"
                v-loading="dataListLoading"
                style="width: 100%"
            >
                <el-table-column label="分类名称" width="280" prop="name"></el-table-column>

                <el-table-column prop="icon" width="200" header-align="center" align="center" label="分类图标">
                    <template slot-scope="scope">
                        <img style="width: 50px; height: 50px" :src="scope.row.icon" :alt="scope.row.icon" />
                    </template>
                </el-table-column>

                <el-table-column prop="homePageShow" header-align="center" align="center" width="80" label="首页显示">
                    <template slot-scope="scope">
                        <!-- (0:不展示;1:展示) -->
                        <el-tag v-if="scope.row.homePageShow === 1" size="small">是</el-tag>
                        <el-tag v-else size="small">否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="orderNo"
                    header-align="center"
                    align="center"
                    width="150"
                    :show-overflow-tooltip="true"
                    label="排序号"
                ></el-table-column>

                <el-table-column fixed="right" header-align="center" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="addOrUpdateHandle(scope.row, 1)">新增</el-button>
                        <el-button type="primary" size="mini" @click="addOrUpdateHandle(scope.row, 2)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="deleteHandle(scope.row.classifyId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDom" @refreshDataList="getList"></add-or-update>
        </div>
    </div>
</template>
<script>
import addOrUpdate from './add-or-update';
import API from '@/api';
export default {
    components: {
        addOrUpdate
    },
    data() {
        return {
            tabPosition: 'left',
            dataForm: {},
            dataList: [],
            dataListLoading: false,
            addOrUpdateVisible: false
        };
    },
    mounted() {
        this.getList();
    },

    watch: {
        //- 解决 同一页面，数据不刷新问题
        // 监听相同路由下参数变化的时候，从而实现异步刷新
        $route(to, from) {
            this.getList();
            this.nickname = this.$route.query.nickname; //修改页面标题
        }
    },

    methods: {
        // 获取列表数据
        getList() {
            this.dataListLoading = true;
            let params ={};
            switch (this.$route.path) {//所属板块(CORPS: 农产品; APRODUCT: 农资产品)
                case '/goodsManger/goodsClassificationManger/ncp/index':
                    //农产品分类管理
                    params.plate='CORPS';

                    break;

                case '/goodsManger/goodsClassificationManger/nz/index':
                    //农资产品分类管理
                    params.plate='APRODUCT';
                    break;
            }


            API.goodsManger.getList(params).then((res) => {
                this.dataListLoading = false;
                this.dataList = res.result;
            });
        },

        // 新增或者编辑
        addOrUpdateHandle(items, type) {
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                console.log(type);
                // 编辑
                if (type == 2 || type == 1) {
                    API.goodsManger.lookCommodityClassifyDetail({ classifyId: items.classifyId }).then((res) => {
                        console.log(res.result.title);
                        items['parentName'] = res.result.parentName;
                        //JSON.parse(JSON.stringify(items) 数据深度拷贝，解决列表和编辑联动问题
                        this.$refs.addOrUpdateDom.init(JSON.parse(JSON.stringify(items)), type);
                    });
                } else {
                    this.$refs.addOrUpdateDom.init(null, type);
                }
            });
        },

        //删除菜单
        deleteHandle(id) {
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: (action) => {
                    if (action !== 'cancel') {
                        API.goodsManger.delCommodityClassify({ classifyId: id }).then((res) => {
                            if (res.code == '0000') {
                                this.$message({
                                    type: 'success',
                                    message: `删除成功`
                                });
                                this.getList();
                            }
                        });
                    }
                }
            });
        }
    }
};
</script>
<style scoped>
.menus-box {
    background: #fff;
    padding: 20px;
}
</style>